<template>
  <div class="modal-overlay" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>{{ isEditMode ? '编辑警员' : '添加警员' }}</h3>
        <button class="close-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="name">姓名:</label>
            <input id="name" type="text" v-model="formData.name" required>
          </div>
          <div class="form-group">
            <label for="officerNumber">警员编号:</label>
            <input id="officerNumber" type="text" v-model="formData.officerNumber" required :disabled="isEditMode">
          </div>
          <div class="form-group">
            <label for="department">部门:</label>
            <select id="department" v-model="formData.department">
              <option>刑侦大队</option>
              <option>巡逻支队</option>
              <option>交警大队</option>
              <option>特警支队</option>
              <option>社区警务</option>
            </select>
          </div>
          <div class="form-group">
            <label for="phone">联系方式:</label>
            <input id="phone" type="tel" v-model="formData.phone" required placeholder="11位手机号">
          </div>
          <div class="form-group">
            <label for="skills">专业技能 (选填):</label>
            <textarea id="skills" v-model="formData.skills" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label for="trainingRecord">培训记录 (选填):</label>
            <textarea id="trainingRecord" v-model="formData.trainingRecord" rows="3"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-cancel" @click="closeModal">取消</button>
        <button class="btn btn-confirm" @click="submitForm">{{ isEditMode ? '更新' : '提交' }}</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
const props = defineProps<{
  initialData?: any,
  isEditMode: boolean
}>();

const emit = defineEmits(['close', 'save']);

// 添加 officerId 字段
const formData = reactive({
  officerId: null,
  officerNumber: '',
  name: '',
  department: '刑侦大队',
  phone: '',
  skills: '',
  trainingRecord: ''
});

// 初始化表单数据
onMounted(() => {
  if (props.initialData) {
    formData.officerId = props.initialData.data?.officerId || null;
    formData.officerNumber = props.initialData.data?.officerNumber || '';
    formData.name = props.initialData.data?.name || '';
    formData.department = props.initialData.data?.department || '刑侦大队';
    formData.phone = props.initialData.data?.phone || '';
    formData.skills = props.initialData.data?.skills || '';
    formData.trainingRecord = props.initialData.data?.trainingRecord || '';
  }
});

const closeModal = () => {
  emit('close');
};

const submitForm = () => {
  // 表单验证
  const errors = [];
  if (!formData.officerNumber) errors.push('警员编号');
  if (!formData.name) errors.push('姓名');
  if (!formData.phone) errors.push('联系方式');

  if (errors.length > 0) {
    alert(`请填写以下必填项：${errors.join('、')}`);
    return;
  }

  // 验证联系方式是否为11位数字
  if (formData.phone && !/^1[3-9]\d{9}$/.test(formData.phone)) {
    alert('联系方式必须为11位手机号');
    return;
  }

  // 发送数据时使用后端期望的字段名
  const formDataToSubmit = {
    officerId: formData.officerId,
    officerNumber: formData.officerNumber,
    name: formData.name,
    department: formData.department,
    phone: formData.phone,
    skills: formData.skills,
    trainingRecord: formData.trainingRecord
  };

  emit('save', formDataToSubmit);
};
</script>

<style scoped>
@import "@/assets/styles/views/admin/PersonnelFormModal.css";
</style>
